.realTime {
  :global {
    .ant-card .ant-card-body {
      padding: 0;
    }
  }
}

.BoxView {
  width: 100%;
  height: 17rem;
  padding: 20px;
}

.BoxBase {
  position: relative;
  width: 16rem;
  height: 8rem;
  background-size: contain;
  border: 5px solid #fff;
  cursor: pointer;
}

.BoxBaseSelected {
  border: 5px solid #196cfe;
}

.BoxBase:hover {
  opacity: 0.9;
}

.BoxContent {
  flex-wrap: wrap;
  gap: 20px 20px;
  max-height: 18rem;
  overflow-x: hidden;
  overflow-y: auto;
}

.BoxContentTitle {
  position: absolute;
  // top: 20px;
  // left: 20px;
  top: 34%;
  left: 40%;
  font-weight: 500;
  font-size: 24px;
}

.BoxContentBreak {
  position: absolute;
  top: 40%;
  left: 38%;
  font-weight: 500;
  font-size: 18px;
}

.BoxContentStatus {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 24px;
  padding: 0 4px;
  color: #fff;
  text-align: center;
  border-radius: 0 0 0 12px;
}

.Base {
  background-image: url('@/assets/img/ico-break0.svg');
}

.Small {
  // background-image: url('@/assets/img/ico-break1-10.svg');
  background-image: url('@/assets/img/ico-break0.svg');
}

.Middle {
  // background-image: url('@/assets/img/ico-break10-20.svg');
  background-image: url('@/assets/img/ico-break0.svg');
}

.Large {
  // background-image: url('@/assets/img/ico-break-20.svg');
  background-image: url('@/assets/img/ico-break0.svg');
}

.BoxTitle {
  color: #222;
  font-weight: 500;
  font-size: 16px;
}

.BoxText {
  color: #222;
  font-weight: 500;
  font-size: 28px;
}

.BoxTitleBox {
  width: 8rem;
}

.CardTitle {
  color: #222222;
  font-weight: bold;
  font-size: 18px;
}

.StackContent {
  width: 300px;
  padding: 10px;
}

.StackContentTitle {
  color: #222;
  font-weight: 700;
  font-size: 20px;
}

.StackContentStatus {
  display: inline-block;
  margin-left: 10px;
  padding: 0 6px;
  color: #fff;
  border-radius: 4px;
}

.StackContentText {
  margin-top: 24px;
}

.StackContentTextLabel {
  width: 8.8rem;
  color: #666;
  font-weight: 500;
  font-size: 14px;
}

.StackContentTextValue {
  width: 4rem;
  color: #222;
  font-weight: 500;
  font-size: 14px;
}

.StackTitle {
  color: #222;
  font-weight: 700;
  font-size: 22px;
}

.StackList {
  flex-wrap: wrap;
  gap: 2rem 1rem;
  height: 210px;
  margin-top: 2.7rem;
  margin-left: 2.2rem;
  overflow-x: hidden;
  overflow-y: auto;
}

.StackBaseBox {
  z-index: 1;
  width: 130px;
  height: 164px;
  //margin-bottom: 10px;
  background-position: center center;
  background-size: cover;
  cursor: pointer;
}

.StackBaseStatus {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 999;
  padding: 0 4px;
  color: #fff;
  border-radius: 0 0 0 12px;
}

.StackBaseBoxSelected {
  border: 5px solid #196cfe;
}

.StackBaseBox:hover {
  opacity: 0.9;
}

.StackBaseText {
  margin: 27px 0 0 20px;
  font-size: 12px;

  div:first-child {
    color: #222222;
    font-weight: 700;
    font-size: 15px;
  }
}

.StackBaseAm {
  margin-top: 5px;
  font-size: 12px;
  white-space: nowrap;
  //position: absolute;
  //left: 18%;
  text-align: center;
}

.StackBase {
  background-image: url('@/assets/img/base.png');
}

.StackSmall {
  background-image: url('@/assets/img/small.png');
}

.StackMiddle {
  background-image: url('@/assets/img/middle.png');
}

.StackHigh {
  background-image: url('@/assets/img/high.png');
}

.ClusterBase {
  background-image: url('@/assets/img/moduel_gray_cloud.svg');
}

.ClusterBaseSmall {
  background-image: url('@/assets/img/moduel_yellow_cloud.svg');
}

.ClusterBaseMiddle {
  background-image: url('@/assets/img/moduel_orange_cloud.svg');
}

.ClusterBaseHigh {
  background-image: url('@/assets/img/moduel_red_cloud.svg');
}

// 色卡
.ColorMap {
  display: flex;
}

.ColorMapBox {
  height: 12px;
  line-height: 12px;
}

.ColorMapBoxCard {
  width: 20px;
  height: 12px;
}

.ClusterContentLeft {
  width: 20%;
}

// 模组单位
.ClusterTitle {
  margin-bottom: 20px;
  color: #222;
  font-weight: 700;
  font-size: 16px;
}

.ClusterContent {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  min-height: 25rem;
  max-height: 25rem;
  padding: 20px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 6px solid #dfe5f5;
}

.ClusterBaseBox {
  position: relative;
  width: 140px;
  height: 160px;
  margin-bottom: 10px;
  background-position: center center;
  background-size: cover;
  border: 5px solid #fff;
  cursor: pointer;
}

.ClusterBaseBoxSelected {
  border: 5px solid #196cfe;
}

.ClusterBaseBox:hover {
  opacity: 0.9;
}

.ClusterText {
  margin: 25px 0 0 22px;
  font-size: 12px;
  text-align: left;

  div:first-child {
    color: #222222;
    font-weight: 700;
    font-size: 12px;
  }
}

.Unit {
  height: 26rem;
  min-height: 10rem;
  max-height: 26rem;
  padding: 12px 25px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 6px solid #dce2f4;
}

.UnitContent {
  flex-wrap: wrap;
  gap: 12px 25px;
  min-height: 23rem;
}

.UnitContentBox {
  position: relative;
  width: 240px;
  height: 120px;
  background-size: contain;
}

.UnitNormal {
  background-image: url('@/assets/img/unit_gray_cloud.png');
}

.UnitSmall {
  background-image: url('@/assets/img/unit_yellow_cloud.png');
}

.UnitMiddle {
  background-image: url('@/assets/img/unit_orange_cloud.png');
}

.UnitHigh {
  background-image: url('@/assets/img/unit_red_cloud.png');
}

.UnitText {
  margin: 20px;
  font-size: 12px;
}

.UnitBreak {
  position: absolute;
  top: 0;
  right: 0;
  width: 58px;
  height: 24px;
  padding: 0 10px;
  color: #fff;
  background: #fd615a;
  border-radius: 0px 0px 0px 12px;
}

.UnitTempVolText {
  display: flex;
  justify-content: right;
  margin-top: -20px;
}
